.flex_layout{
  display: flex;
}

/* 从左向右：水平分布 */
.flex_horizontal_left_around{
  justify-content: space-around;
  align-items: center;
}
.flex_horizontal_left_between{
  justify-content: space-between;
  align-items: center;
}
.flex_horizontal_left_center{
  justify-content: center;
  align-items: center;
}
.flex_wrap{
  flex-wrap: wrap;
}

/* 从右向左：水平分布 */
.flex_horizontal_right_around{
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
}
.flex_horizontal_right_between{
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

/* 从上到下：垂直分布 */
/* 垂直水平居中 */
.flex_vertical_up_around{
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* 水平局中 */
.flex_vertical_up_center{
  flex-direction: column;
  align-items: center;
}

/* 底部对齐 */
.flex_bottom{
  align-items: flex-end;
}